import { Component, OnInit, ElementRef, ViewChild, Input, Inject, Output, EventEmitter } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd';

@Component({
  selector: 'app-tabs-editor',
  templateUrl: './tabs-editor.component.html',
  styleUrls: ['../../editor.less']
})
export class TabsEditorComponent implements OnInit {
  constructor(private nzModalService: NzModalService,) { }
  inputVisible = false;
  inputValue = '';
  editIndex = null
  @ViewChild('inputElement', { static: false }) inputElement?: ElementRef;
  @Input() selectEl = {
    type: 'tabs',
    tabs: [{
      name: 'tab1',
      data: []
    }]
  }
  @Output() onSave = new EventEmitter(null)
  ngOnInit(): void {
  }
  save() {
    this.onSave.emit()
  }
  showInput(): void {
    this.inputVisible = true;
    setTimeout(() => {
      this.inputElement?.nativeElement.focus();
    }, 10);
  }
  handleInputConfirm(): void {
    if (this.inputValue) {
      this.selectEl.tabs.push({ name: this.inputValue, data: [] })
    }
    this.inputValue = '';
    this.inputVisible = false;
  }

  handleInputEditConfirm(i) {
    if(this.selectEl.tabs[i].name==''){
      this.nzModalService.error({
        nzTitle: '不能为空'
      })
      this.selectEl.tabs[i].name='tab'+(i+1)
    }
   
    this.editIndex = null
  }
  handleClose(removedTag: {}): void {
    this.selectEl.tabs = this.selectEl.tabs.filter(tag => tag !== removedTag);
  }
}
